<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>会员管理</title>
  <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all">
  <link rel="stylesheet" th:href="@{/css/layuimini.css?v=2.0.4.2}" media="all">
  <link rel="stylesheet" th:href="@{/css/themes/default.css}" media="all">
  <link rel="stylesheet" th:href="@{/lib/font-awesome-4.7.0/css/font-awesome.min.css}" media="all">
  <style>
    body{
      overflow: hidden;
    }
    .div-content{

      background-color:white;
      border-radius: 5px;
      padding: 15px;

    }
    .table-search-fieldset {
      margin: 0;
      border: 1px solid #e6e6e6;
      padding: 10px 20px 5px 20px;
      color: #6b6b6b;
    }

  </style>
</head>
<body>


<div class="div-content">

  <form class="layui-form layui-form-pane" id="form-search">
    <fieldset class="table-search-fieldset">
      <legend>
        搜索条件
      </legend>

      <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label">姓名:</label>
          <div class="layui-input-inline" style="width: 150px;">
            <input type="text" name="name" autocomplete="off" class="layui-input">
          </div>
        </div>

        <div class="layui-inline">
          <label class="layui-form-label">手机号:</label>
          <div class="layui-input-inline" style="width: 150px;">
            <input type="text" name="phone" autocomplete="off" class="layui-input">
          </div>
        </div>
        <div class="layui-inline">
          <button id="btn-search" lay-submit lay-filter="bt-search-filter" type="button" class="layui-btn layui-btn-radius layui-btn-normal">
            <i class="layui-icon layui-icon-search"></i>
            查询
          </button>
          <button id="btn-reset"  type="reset" class="layui-btn layui-btn-radius  layui-btn-primary">
            <i class="layui-icon layui-icon-fonts-clear"></i>
            重置
          </button>
        </div>
      </div>
    </fieldset>

  </form>
  <table id="table-mem" lay-filter="table-mem-filter"></table>

</div>

<script type="text/html" id="convertDept">
  {{#
  return d.dept.deptName;

  }}

</script>

<script type="text/html" id="table-mem-toolbar">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" lay-event="add">添加会员</button>
    <a class="layui-btn layui-btn-danger layui-btn-sm" lay-event="delete">批量删除</a>
  </div>
</script>

<script type="text/html" id="col-mem-toolbar">

  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>

</script>
<script type="text/html" id="convertSex">
  {{#
  if(d.sex == 'M'){

  return '男';
  }else if(d.sex == 'F'){
  return '女';
  }else{
  return '妖';

  }
  }}

</script>
<script th:src="@{/webjars/jquery/3.5.1/jquery.min.js}" charset="utf-8"></script>
<script th:src="@{/layui/layui.js}" charset="utf-8"></script>
<script th:inline="javascript">


  function refreshTable(){
    $("#btn-reset").click();
    $("#btn-search").click();
  }
  var ctxPath = [[@{/}]];

    layui.use(['laydate','table','form'], function() {
      var laydate = layui.laydate;
      var table = layui.table;
      var form = layui.form;

      // 表格头部工具栏监听
      table.on('toolbar(table-mem-filter)', function (obj) {
        if (obj.event == 'add') {
          layer.open({
            type: 2,
            title: "新增会员",
            area: ['100%', '100%'],
            shadeClose: false,
            content: ctxPath + 'mem/add/ui'
          });
        } else if (obj.event == 'delete') {
          var checkStatus = table.checkStatus('table-mem'); //idTest 即为基础参数 id 对应的值
          var idArr = new Array();
          // 如果没有选中任何数据
          if (checkStatus.data.length == 0) {
            layer.alert('你没有选中任何数据', {icon: 2, anim: 6, title: "警告"});
            return false;
          }

          $(checkStatus.data).each(function (){
            idArr.push(this.memberId);
          })


          layer.confirm('您确认删除选中记录？', {icon: 3, title: '删除确认'}, function (index) {
            // 异步请求删除数据,结果提示，刷新表格

            let url = ctxPath + "mem/" + idArr.join(",");
            var params = {
              _method: "DELETE"
            }


            $.post(url, params, function (response) {

              if (response.code == 0) {
                layer.msg(response.message, {icon: 1});
                refreshTable();
              } else {
                layer.alert(response.message, {icon: 2, anim: 6});
              }

            })

            layer.close(index);
          });

        }

      });

      //员工列表表格渲染
      table.render({
        elem: '#table-mem'

        , url: ctxPath + 'mem/list' //数据接口
        , page: true //开启分页
        , height: 'full-135'
        , toolbar: "#table-mem-toolbar"
        , limits: [10, 20, 30, 50, 100]
        , limit: 13
        , cols: [[ //表头
          {type: "checkbox",width: 60},
          {field: 'memberId', title: '会员编号', sort: true, align: 'center',hide: 'ture'}
          , {field: 'name', title: '姓名', align: 'center'}
          , {field: 'sex', title: '性别', align: 'center',templet:'#convertSex'}
          , {field: 'phone', title: '手机号', align: 'center'}
          , {field: 'date', title: '注册日期', sort: true, align: 'center'}
          , {field: 'record', title: '备注', width: 700, align: 'center'}
          , {title: '操作', width: 150, toolbar: '#col-mem-toolbar', align: 'center'}
        ]]
      });


      // 监听查询
      form.on('submit(bt-search-filter)', function (data) {

        console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
        // 刷新表格
        table.reload('table-mem', {
          where: { //设定异步数据接口的额外参数，任意设
            name: data.field.name,
            phone: data.field.phone
            //…
          }
          ,page: {
            curr: 1 //重新从第 1 页开始
          }
        });

        return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
      });


      // 监听操作列
      table.on('tool(table-mem-filter)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
        var data = obj.data; //获得当前行数据
        var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
        if (layEvent == 'del') {
          layer.confirm('您确认删除该会员: ' + data.name + " ? ", {icon: 3, title: '删除确认'}, function (index) {
            // 异步请求删除数据,结果提示，刷新表格

            let url = ctxPath + "mem/" + data.memberId;
            var params = {
              _method: "DELETE"
            }


            $.post(url, params, function (response) {

              if (response.code == 0) {
                layer.msg(response.message, {icon: 1});
                refreshTable();
              } else {
                layer.alert(response.message, {icon: 2, anim: 6});
              }

            });

            layer.close(index);
          });


        } else if (layEvent == 'edit') {
          layer.open({
            type: 2,
            title: "修改会员",
            area: ['100%', '100%'],
            shadeClose: false,

            content: ctxPath + 'mem/' + data.memberId
          });

        }


      });

    });

</script>



</body>
</html>